import React, { useState, useEffect } from 'react'
import { X, Save, TestTube, Moon, Sun, Monitor, Globe, Key, Zap, Database } from 'lucide-react'

interface SettingsPanelProps {
  isOpen: boolean
  onClose: () => void
}

interface Settings {
  ai: {
    provider: 'openai' | 'anthropic' | 'deepseek' | 'local' | 'longcat'
    apiKey: string
    model: string
    temperature: number
    maxTokens: number
    baseURL: string
    customModel: string
    streaming: boolean
    timeout: number
    retryAttempts: number
    retryDelay: number
  }
  theme: 'light' | 'dark' | 'auto'
  editor: {
    fontSize: number
    fontFamily: string
    tabSize: number
    wordWrap: boolean
    autoSave: boolean
    autoSaveDelay: number
  }
  shortcuts: Record<string, string>
}

const SettingsPanel: React.FC<SettingsPanelProps> = ({ isOpen, onClose }) => {
  const [settings, setSettings] = useState<Settings>({
    ai: {
      provider: 'openai',
      apiKey: '',
      model: 'gpt-3.5-turbo',
      temperature: 0.7,
      maxTokens: 2000,
      baseURL: '',
      customModel: '',
      streaming: true,
      timeout: 30000,
      retryAttempts: 3,
      retryDelay: 1000
    },
    theme: 'auto',
    editor: {
      fontSize: 14,
      fontFamily: 'system-ui, -apple-system, sans-serif',
      tabSize: 4,
      wordWrap: true,
      autoSave: true,
      autoSaveDelay: 1000
    },
    shortcuts: {}
  })

  const [isLoading, setIsLoading] = useState(false)
  const [testResult, setTestResult] = useState<string>('')
  const [activeTab, setActiveTab] = useState<'ai' | 'editor' | 'theme' | 'shortcuts'>('ai')

  useEffect(() => {
    if (isOpen) {
      loadSettings()
    }
  }, [isOpen])

  const loadSettings = async () => {
    try {
      const savedSettings = await window.electronAPI.getSettings()
      setSettings(prev => ({ ...prev, ...savedSettings }))
    } catch (error) {
      console.error('Failed to load settings:', error)
    }
  }

  const saveSettings = async () => {
    setIsLoading(true)
    try {
      await window.electronAPI.updateSettings(settings)
      console.log('Settings saved successfully')
    } catch (error) {
      console.error('Failed to save settings:', error)
    } finally {
      setIsLoading(false)
    }
  }

  const testAIConnection = async () => {
    setTestResult('测试中...')
    try {
      // Validate settings first
      const validation = await window.electronAPI.validateAIConfig(settings.ai)
      if (!validation.valid) {
        setTestResult(`❌ 配置无效: ${validation.error}`)
        return
      }
      
      const result = await window.electronAPI.testAIConnection()
      if (result) {
        setTestResult('✅ 连接成功！')
      } else {
        setTestResult('❌ 连接失败，请检查配置')
      }
    } catch (error) {
      setTestResult(`❌ 测试失败: ${error instanceof Error ? error.message : '未知错误'}`)
    }
  }

  const handleAIProviderChange = (provider: 'openai' | 'anthropic' | 'deepseek' | 'local' | 'longcat') => {
    setSettings(prev => ({
      ...prev,
      ai: {
        ...prev.ai,
        provider,
        model: getDefaultModel(provider)
      }
    }))
  }

  const getDefaultModel = (provider: string): string => {
    switch (provider) {
      case 'openai':
        return 'gpt-3.5-turbo'
      case 'anthropic':
        return 'claude-3-5-sonnet-20241022'
      case 'deepseek':
        return 'deepseek-chat'
      case 'local':
        return 'llama2'
      case 'longcat':
        return 'LongCat-Flash-Chat'
      default:
        return 'gpt-3.5-turbo'
    }
  }

  const getAvailableModels = (): string[] => {
    switch (settings.ai.provider) {
      case 'openai':
        return ['gpt-3.5-turbo', 'gpt-4', 'gpt-4-turbo-preview', 'gpt-4o', 'gpt-4o-mini']
      case 'anthropic':
        return ['claude-3-haiku-20240307', 'claude-3-sonnet-20240229', 'claude-3-opus-20240229', 'claude-3-5-sonnet-20241022', 'claude-3-5-haiku-20241022']
      case 'deepseek':
        return ['deepseek-chat', 'deepseek-coder']
      case 'local':
        return ['llama2', 'llama2:13b', 'llama2:70b', 'codellama', 'mistral', 'vicuna']
      case 'longcat':
        return ['LongCat-Flash-Chat', 'LongCat-Flash-Chat-Plus']
      default:
        return []
    }
  }

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl sm:max-w-6xl h-[80vh] sm:h-[85vh] max-h-[90vh] sm:max-h-[95vh] flex flex-col overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">设置</h2>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
          >
            <X className="w-5 h-5 text-gray-500 dark:text-gray-400" />
          </button>
        </div>

        <div className="flex flex-1 min-h-0">
          {/* Sidebar */}
          <div className="w-40 sm:w-48 border-r border-gray-200 dark:border-gray-700 p-3 sm:p-4 flex-shrink-0 overflow-y-auto">
            <nav className="space-y-2">
              <button
                onClick={() => setActiveTab('ai')}
                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
                  activeTab === 'ai'
                    ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
                    : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
                }`}
              >
                <Zap className="w-4 h-4" />
                <span className="hidden sm:inline ml-2">AI 设置</span>
              </button>
              <button
                onClick={() => setActiveTab('editor')}
                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
                  activeTab === 'editor'
                    ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
                    : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
                }`}
              >
                <Key className="w-4 h-4" />
                <span className="hidden sm:inline ml-2">编辑器</span>
              </button>
              <button
                onClick={() => setActiveTab('theme')}
                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
                  activeTab === 'theme'
                    ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
                    : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
                }`}
              >
                <Sun className="w-4 h-4" />
                <span className="hidden sm:inline ml-2">主题</span>
              </button>
              <button
                onClick={() => setActiveTab('shortcuts')}
                className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
                  activeTab === 'shortcuts'
                    ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
                    : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
                }`}
              >
                <Database className="w-4 h-4" />
                <span className="hidden sm:inline ml-2">快捷键</span>
              </button>
            </nav>
          </div>

          {/* Content */}
          <div className="flex-1 p-4 sm:p-6 overflow-y-auto min-h-0">
            {/* AI Settings */}
            {activeTab === 'ai' && (
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">AI 配置</h3>

                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        AI 提供商
                      </label>
                      <select
                        value={settings.ai.provider}
                        onChange={(e) => handleAIProviderChange(e.target.value as any)}
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                        <option value="openai">OpenAI</option>
                        <option value="anthropic">Anthropic Claude</option>
                        <option value="deepseek">DeepSeek</option>
                        <option value="local">本地模型</option>
                        <option value="longcat">LongCat (美团)</option>
                      </select>
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        API 密钥
                      </label>
                      <input
                        type="password"
                        value={settings.ai.apiKey}
                        onChange={(e) => setSettings(prev => ({
                          ...prev,
                          ai: { ...prev.ai, apiKey: e.target.value }
                        }))}
                        placeholder="输入您的 API 密钥"
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      />
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        模型
                      </label>
                      <select
                        value={settings.ai.model}
                        onChange={(e) => setSettings(prev => ({
                          ...prev,
                          ai: { ...prev.ai, model: e.target.value }
                        }))}
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      >
                        {getAvailableModels().map((model, index) => (
                          <option key={`model-${model}-${index}`} value={model}>{model}</option>
                        ))}
                      </select>
                    </div>

                    {(settings.ai.provider === 'local' || settings.ai.provider === 'deepseek' || settings.ai.provider === 'longcat') && (
                      <div>
                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                          API 基础 URL
                        </label>
                        <input
                          type="url"
                          value={settings.ai.baseURL}
                          onChange={(e) => setSettings(prev => ({
                            ...prev,
                            ai: { ...prev.ai, baseURL: e.target.value }
                          }))}
                          placeholder={settings.ai.provider === 'local' ? 'http://localhost:11434' : settings.ai.provider === 'deepseek' ? 'https://api.deepseek.com/v1' : 'https://api.longcat.chat/openai'}
                          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                          {settings.ai.provider === 'local'
                            ? '本地模型 API 地址 (例如 Ollama: http://localhost:11434)'
                            : settings.ai.provider === 'deepseek'
                            ? 'DeepSeek API 地址 (可选，默认使用官方地址)'
                            : 'LongCat API 地址 (可选，默认: https://api.longcat.chat/openai)'}
                        </p>
                      </div>
                    )}

                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                          温度 (0-1)
                        </label>
                        <input
                          type="number"
                          min="0"
                          max="1"
                          step="0.1"
                          value={settings.ai.temperature}
                          onChange={(e) => setSettings(prev => ({
                            ...prev,
                            ai: { ...prev.ai, temperature: parseFloat(e.target.value) }
                          }))}
                          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                          最大令牌数
                        </label>
                        <input
                          type="number"
                          min="100"
                          max="4000"
                          step="100"
                          value={settings.ai.maxTokens}
                          onChange={(e) => setSettings(prev => ({
                            ...prev,
                            ai: { ...prev.ai, maxTokens: parseInt(e.target.value) }
                          }))}
                          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                      </div>
                    </div>

                    <div className="flex items-center gap-4">
                      <button
                        onClick={testAIConnection}
                        disabled={!settings.ai.apiKey}
                        className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
                      >
                        <TestTube className="w-4 h-4" />
                        测试连接
                      </button>
                      {testResult && (
                        <span className="text-sm text-gray-600 dark:text-gray-400">{testResult}</span>
                      )}
                    </div>

                    {/* Streaming Settings */}
                    <div className="space-y-4">
                      <div className="flex items-center justify-between">
                        <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                          启用流式响应
                        </label>
                        <button
                          type="button"
                          onClick={() => setSettings(prev => ({ ...prev, ai: { ...prev.ai, streaming: !prev.ai.streaming } }))}
                          className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                            settings.ai.streaming ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'
                          }`}
                        >
                          <span
                            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                              settings.ai.streaming ? 'translate-x-6' : 'translate-x-1'
                            }`}
                          />
                        </button>
                      </div>

                      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
                        <div>
                          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            超时 (ms)
                          </label>
                          <input
                            type="number"
                            value={settings.ai.timeout}
                            onChange={(e) => setSettings(prev => ({ ...prev, ai: { ...prev.ai, timeout: parseInt(e.target.value) || 30000 } }))}
                            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            min="5000"
                            max="120000"
                            step="1000"
                          />
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            重试次数
                          </label>
                          <input
                            type="number"
                            value={settings.ai.retryAttempts}
                            onChange={(e) => setSettings(prev => ({ ...prev, ai: { ...prev.ai, retryAttempts: parseInt(e.target.value) || 3 } }))}
                            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            min="0"
                            max="5"
                          />
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            重试延迟 (ms)
                          </label>
                          <input
                            type="number"
                            value={settings.ai.retryDelay}
                            onChange={(e) => setSettings(prev => ({ ...prev, ai: { ...prev.ai, retryDelay: parseInt(e.target.value) || 1000 } }))}
                            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            min="100"
                            max="10000"
                            step="100"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Editor Settings */}
            {activeTab === 'editor' && (
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">编辑器设置</h3>

                  <div className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                          字体大小
                        </label>
                        <input
                          type="number"
                          min="10"
                          max="24"
                          value={settings.editor.fontSize}
                          onChange={(e) => setSettings(prev => ({
                            ...prev,
                            editor: { ...prev.editor, fontSize: parseInt(e.target.value) }
                          }))}
                          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                          制表符大小
                        </label>
                        <input
                          type="number"
                          min="2"
                          max="8"
                          value={settings.editor.tabSize}
                          onChange={(e) => setSettings(prev => ({
                            ...prev,
                            editor: { ...prev.editor, tabSize: parseInt(e.target.value) }
                          }))}
                          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                      </div>
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        字体
                      </label>
                      <input
                        type="text"
                        value={settings.editor.fontFamily}
                        onChange={(e) => setSettings(prev => ({
                          ...prev,
                          editor: { ...prev.editor, fontFamily: e.target.value }
                        }))}
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      />
                    </div>

                    <div className="space-y-3">
                      <label className="flex items-center gap-3">
                        <input
                          type="checkbox"
                          checked={settings.editor.wordWrap}
                          onChange={(e) => setSettings(prev => ({
                            ...prev,
                            editor: { ...prev.editor, wordWrap: e.target.checked }
                          }))}
                          className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                        />
                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                          自动换行
                        </span>
                      </label>

                      <label className="flex items-center gap-3">
                        <input
                          type="checkbox"
                          checked={settings.editor.autoSave}
                          onChange={(e) => setSettings(prev => ({
                            ...prev,
                            editor: { ...prev.editor, autoSave: e.target.checked }
                          }))}
                          className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                        />
                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                          自动保存
                        </span>
                      </label>
                    </div>

                    {settings.editor.autoSave && (
                      <div>
                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                          自动保存延迟 (毫秒)
                        </label>
                        <input
                          type="number"
                          min="500"
                          max="5000"
                          step="500"
                          value={settings.editor.autoSaveDelay}
                          onChange={(e) => setSettings(prev => ({
                            ...prev,
                            editor: { ...prev.editor, autoSaveDelay: parseInt(e.target.value) }
                          }))}
                          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}

            {/* Theme Settings */}
            {activeTab === 'theme' && (
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">主题设置</h3>

                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                        主题模式
                      </label>
                      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
                        <button
                          onClick={() => setSettings(prev => ({ ...prev, theme: 'light' }))}
                          className={`p-4 border rounded-lg flex flex-col items-center gap-2 transition-colors ${
                            settings.theme === 'light'
                              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                              : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
                          }`}
                        >
                          <Sun className="w-6 h-6 text-yellow-500" />
                          <span className="text-sm font-medium">浅色</span>
                        </button>

                        <button
                          onClick={() => setSettings(prev => ({ ...prev, theme: 'dark' }))}
                          className={`p-4 border rounded-lg flex flex-col items-center gap-2 transition-colors ${
                            settings.theme === 'dark'
                              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                              : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
                          }`}
                        >
                          <Moon className="w-6 h-6 text-blue-500" />
                          <span className="text-sm font-medium">深色</span>
                        </button>

                        <button
                          onClick={() => setSettings(prev => ({ ...prev, theme: 'auto' }))}
                          className={`p-4 border rounded-lg flex flex-col items-center gap-2 transition-colors ${
                            settings.theme === 'auto'
                              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                              : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
                          }`}
                        >
                          <Monitor className="w-6 h-6 text-green-500" />
                          <span className="text-sm font-medium">跟随系统</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Shortcuts Settings */}
            {activeTab === 'shortcuts' && (
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">快捷键设置</h3>

                  <div className="text-sm text-gray-600 dark:text-gray-400">
                    快捷键功能正在开发中，敬请期待！
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-between p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700 flex-shrink-0 flex-col sm:flex-row gap-3 sm:gap-0">
          <div className="text-sm text-gray-500 dark:text-gray-400">
            设置会自动保存
          </div>
          <div className="flex items-center gap-3">
            <button
              onClick={onClose}
              className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
            >
              取消
            </button>
            <button
              onClick={saveSettings}
              disabled={isLoading}
              className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
            >
              <Save className="w-4 h-4" />
              {isLoading ? '保存中...' : '保存设置'}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default SettingsPanel